<template>
    <div>
        <van-contact-card type="add" @click="onAdd" />
        <van-contact-card type="edit" :name="currentContact.name" :tel="currentContact.tel" @click="onEdit" />





        <span v-show="isdeteleshow" @click="alldetele" class="detele">删除</span>

        <van-swipe-cell v-for="item, index in  list " :key="index">

            <div style="display: flex; align-items: center;">
                <van-checkbox v-model="item.checked"> </van-checkbox>
                <van-card :price="item.sell_price" :title="item.title" :thumb="item.thumb_path">
                    <template #footer>
                        <van-stepper @change="change(item.id, item.num)" v-model="item.num" />
                    </template>
                </van-card>

            </div>



            <template #right>
                <van-button @click="deletecart(index)" square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>

        <van-submit-bar class="totop" :price="total" button-text="提交订单" @submit="onSubmit">
            <van-checkbox @change="allchange" v-model="checked">全选</van-checkbox>
        </van-submit-bar>




    </div>
</template>

<script>
import { getshopcarlist } from "../api/shopcat"
export default {
    data() {
        return {
            currentContact: {
                name: '张三',
                tel: '13000000000',
            },
            checked2: false,
            checked: false,
            radio: '1',
            list: [
                // {
                //     "id": 95,
                //     "title": "惠普（HP）LaserJet 2035商用黑白激光打印机（黑色）",
                //     "sell_price": 1899,
                //     "thumb_path": "http://images.w0824.com/hp1.png",
                //     num: 6
                // },
                // {
                //     "id": 95,
                //     "title": "惠普（HP）LaserJet 2035商用黑白激光打印机（黑色）",
                //     "sell_price": 1899,
                //     "thumb_path": "http://images.w0824.com/hp1.png",
                //     num: 6
                // },
                // {
                //     "id": 95,
                //     "title": "惠普（HP）LaserJet 2035商用黑白激光打印机（黑色）",
                //     "sell_price": 1899,
                //     "thumb_path": "http://images.w0824.com/hp1.png",
                //     num: 6
                // },
                // {
                //     "id": 95,
                //     "title": "惠普（HP）LaserJet 2035商用黑白激光打印机（黑色）",
                //     "sell_price": 1899,
                //     "thumb_path": "http://images.w0824.com/hp1.png",
                //     num: 6
                // },
            ]
        }
    },
    async created() {
        console.log("购物车", this.$store.state.shoplist);
        // getshopcarlist()
        // Promise.all([getshopcarlist(95), getshopcarlist(88)])
        let result = await Promise.all(this.$store.state.shoplist.map(v => getshopcarlist(v.id)))
        console.log("请求结果", result); // 此刻是 [ { message: {} ,status :0 }]  但是我只需要menssage 里面的数据
        //  处理一下数据结构
        var list = result.map(v => v.message)
        // 额外处理添加一下对应num
        list.forEach((v, i) => {
            v.num = this.$store.state.shoplist[i].num,
                v.checked = false
        })


        console.log("处理后的结果", list);
        this.list = list

    },

    computed: {

        isdeteleshow() {
            return this.list.some(v => v.checked)
        },
        total() {
            var num = 0
            this.list.forEach(v => {
                if (v.checked) {
                    num = num + v.sell_price * 100 * v.num
                }
            })



            return num
        }
    },
    methods: {
        onAdd() {
            console.log("address");
        },
        onEdit() {
            console.log("onEdit");
        },
        alldetele() {
            //  删除视口数据  
            this.list = this.list.filter(v => !v.checked)
            //  删除vuex 的数据
            var a = this.list.map(v => {
                return { id: v.id, num: v.num }
            })

            this.$store.commit("alldetele", a)


        },

        allchange(val) {
            this.list.forEach(v => v.checked = val)
        },

        onSubmit() {
            console.log("提交订单");
        },

        change(val, val2) {
            console.log("当前的数量", val, val2);
            var obj = { id: val, num: val2 }
            this.$store.commit('addcart2', obj)
        },
        deletecart(val) {
            console.log("下标几需要删除", val);

            // splice 删除数组中某个值

            //  同时要删除 vuex 购物车的数据
            //  问题来了 如何删除vue 中的数据? 
            // this.$store.shoplist.splice()  不要这么做
            //  如果删除vuex 数据, 一定要通过mutaition来删除
            //  所以我们必须先去mutation注册一个用来删除 的函数
            this.list.splice(val, 1)
            this.$store.commit("deletecart", val)


        }
    }


}   
</script>

<style lang="scss" scoped>
.delete-button {
    height: 100%;
}

.totop {
    bottom: 1.9rem;
}

.detele {
    font-size: 0.5rem;
    color: #1989fa;
    position: fixed;
    top: 0.5rem;
    right: 1rem;
    z-index: 999;
}
</style>